<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition>
        <script type="text/javascript">
            function hidefDialog()
            {
                if(fd.visible) {fd.hide(); return;}
                if(fsd.visible) {fsd.hide(); return;}
            }
        </script>
        <p:hotkey bind="esc" handler="hidefDialog()"/>            

        <p:dialog id="fileselectdialog" widgetVar="fsd" header="Select files" modal="true" >
            <h:form id="filesform" prependId="false" enctype="multipart/form-data" >
                <p:dataGrid id="filegrid" var="file" value="#{fileUploadController.files}" columns="6"  
                            rows="24" paginator="true"   
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                            rowsPerPageTemplate="24,36,60"> 
                    <p:column>  
                        <p:panel> 
                            <div style="width: 100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">#{file.name}</div> 
                            <div style="width: 100px; height:100px;overflow:hidden;">
                                <p:commandLink  update=":fdform" oncomplete="fd.show()" >  
                                    <h:graphicImage value="/upload/#{file.userName.name}/#{file.name}" width="100px"/>   
                                    <f:setPropertyActionListener value="#{file}"   
                                                                 target="#{fileUploadController.selectedFile}" />  
                                </p:commandLink>
                            </div>
                            <p:commandButton  update=":fdform" oncomplete="fd.show()" icon="ui-icon-search">  
                                <f:setPropertyActionListener value="#{file}"   
                                                             target="#{fileUploadController.selectedFile}" />  
                            </p:commandButton>  
                            <p:commandButton update=":filesform :newadvert" icon="ui-icon-cancel" action="#{fileUploadController.removeFile()}">  
                                <f:setPropertyActionListener value="#{file}"   
                                                             target="#{fileUploadController.selectedFile}" />  
                            </p:commandButton>  

                            <p:commandButton update=":filesform :newadvert" icon="ui-icon-plusthick" action="#{advertController.addFile(file)}">  

                            </p:commandButton>  
                        </p:panel>  
                    </p:column> 
                </p:dataGrid>
                <p:panel header="Selected">
                    <p:dataGrid id="selectgrid" var="sfile" value="#{advertController.newAdvert.files}" columns="6"  
                                rows="24" > 
                        <p:column>  
                            <p:panel> 
                                <div style="width: 100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">#{sfile.name}</div> 
                                <div style="width: 100px; height:100px;overflow:hidden;">
                                    <p:commandLink  update=":fdform" oncomplete="fd.show()" >  
                                        <h:graphicImage value="/upload/#{sfile.userName.name}/#{sfile.name}" width="100px"/>   
                                        <f:setPropertyActionListener value="#{sfile}"   
                                                                     target="#{fileUploadController.selectedFile}" />  
                                    </p:commandLink>
                                </div>
                                <p:commandButton  update=":fdform" oncomplete="fd.show()" icon="ui-icon-search">  
                                    <f:setPropertyActionListener value="#{sfile}"   
                                                                 target="#{fileUploadController.selectedFile}" />  
                                </p:commandButton>  
                                <p:commandButton update=":filesform" icon="ui-icon-minusthick" action="#{advertController.removeFile(sfile)}">
                                </p:commandButton>
                            </p:panel>  
                        </p:column> 
                    </p:dataGrid>
                </p:panel>
                <h:outputLabel id="ajx">
                    <f:ajax event="click" listener="#{fileUploadController.refreshFiles()}" render=":filesform :newadvert" />
                </h:outputLabel>
                <script>
                    function update_file_list(){
                        document.getElementById("ajx").onclick();
                    }
                </script>
                <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"  
                              mode="advanced"   
                              oncomplete="update_file_list()"
                              sizeLimit="100000"   
                              multiple="true"
                              allowTypes="/(\.|\/)(gif|jpe?g|png)$/" 
                              >
                </p:fileUpload>
                
            </h:form>
        </p:dialog>
        <h:form id="fdform">
            <p:dialog header="Image Detail" widgetVar="fd"
                      modal="true" dynamic="true"
                      resizable="true" showEffect="clip" hideEffect="clip" 
                      width="#{fileUploadController.selectedFile ne null?fileUploadController.width+50:0}" 
                      height="#{fileUploadController.selectedFile ne null?fileUploadController.height+50:0}"
                      position="center center"   
                      >       
                <p:panel id="fileDetail" style="text-align:center;" >  
                    <p:graphicImage value="/upload/#{fileUploadController.selectedFile.userName.name}/#{fileUploadController.selectedFile.name}" />  
                    <div>#{fileUploadController.selectedFile.name}</div> 
                </p:panel>  
            </p:dialog>    
        </h:form>       
    </ui:composition>
</html>

